<%-
local rowcnt = 1
local uci = require("luci.model.uci").cursor()
local fs = require "luci.openclash"

function rowstyle()
    rowcnt = rowcnt + 1
    return (rowcnt % 2) + 1
end

function width(o)
    if o.width then
        if type(o.width) == 'number' then
            return ' style="width:%dpx"' % o.width
        end
        return ' style="width:%s"' % o.width
    end
    return ''
end

local head_width
local e={}
table.insert(e, {group="nameserver", title="NameServer"})
table.insert(e, {group="fallback", title="FallBack"})
table.insert(e, {group="default", title="Default-NameServer"})

local sectiontype = "_"..self.config.."_"..string.match(self.sectiontype, "[%w_]+") or "self.sectiontype"
-%>

<style type="text/css">
    *{margin: 0;padding: 0;}
    
    ul{
        list-style: none;
    }

    h3{
        margin-top: 0;
    }

    .cbi-value-field .cbi-dropdown, .cbi-value-field .cbi-input-select, .cbi-value input[type="text"], .cbi-value input[type="password"] {
        min-width: auto;
    }
    
    #tab-header-<%=self.config%>-<%=self.sectiontype%>{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 16px 20px;
        border-bottom: 1px solid var(--border-light, #e2e8f0);
        background: var(--bg-gray, #f1f5f9);
        min-width: 0;
        box-shadow: none;
        position: relative;
        z-index: 1;
    }

    #tab-header-<%=self.config%>-<%=self.sectiontype%> ul{
        display: flex;
        width: 100%;
        background: #f1f5f9;
        border-radius: 8px;
        border-bottom: none !important;
        border: none !important;
        gap: 5px;
        margin: 0;
        padding: 0;
    }

    #tab-header-<%=self.config%>-<%=self.sectiontype%> ul li{
        flex: 1 1 0;
        min-width: 120px;
        width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 0;
        height: 40px;
        font-size: 12px;
        font-weight: 400;
        color: #64748b;
        background: transparent;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.18s;
        margin: 0;
        user-select: none;
        position: relative;
        box-sizing: border-box;
    }

    #tab-header-<%=self.config%>-<%=self.sectiontype%> ul li.cbi-tab{
        background: #3b82f6;
        color: #fff;
        font-weight: 600;
        z-index: 2;
        border-radius: 6px;
        box-shadow: 0 1px 2px 0 rgba(0,0,0,0.03);
    }
     
    #tab-header-<%=self.config%>-<%=self.sectiontype%> ul li a{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 110%;
        text-align: center;
        text-decoration: none;
        background: none;
        border: none;
        outline: none;
        font: inherit;
        color: inherit;
        cursor: inherit;
        padding: 0;
        margin: 0;
        user-select: none;
        transition: color 0.18s;
    }

    #tab-header-<%=self.config%>-<%=self.sectiontype%> ul li.cbi-tab > a{
        color: #fff !important;
        font-weight: 500;
    }
    
    #tab-header-<%=self.config%>-<%=self.sectiontype%> ul li.cbi-tab-disabled{
        color: #fff;
        background: #f9f9f9;
        opacity: 0.7;
        cursor: pointer;
    }

    #tab-header-<%=self.config%>-<%=self.sectiontype%> ul li.cbi-tab-disabled a{
        color: #000 !important;
    }

    #tab-header-<%=self.config%>-<%=self.sectiontype%> ul li:not(.cbi-tab):hover,
    #tab-header-<%=self.config%>-<%=self.sectiontype%> ul li:not(.cbi-tab):focus{
        color: #3b82f6;
        background: rgba(59,130,246,0.10);
    }
    
    #tab-header-<%=self.config%>-<%=self.sectiontype%> ul li:not(.cbi-tab):hover a,
    #tab-header-<%=self.config%>-<%=self.sectiontype%> ul li:not(.cbi-tab):focus a{
        color: #3b82f6 !important;
    }
    
    #tab-content .dom-<%=self.config%>-<%=self.sectiontype%>{
        display: none;
    }
     
    #tab-content .dom-<%=self.config%>-<%=self.sectiontype%> ul li{
      float: left;
      margin: 15px 10px;
      width: 225px;
    }

    :root[data-darkmode="true"] #tab-header-<%=self.config%>-<%=self.sectiontype%>{
        background: #374151;
        border-bottom: 1px solid #374151;
    }

    :root[data-darkmode="true"] #tab-header-<%=self.config%>-<%=self.sectiontype%> ul{
        background: #374151;
    }

    :root[data-darkmode="true"] #tab-header-<%=self.config%>-<%=self.sectiontype%> ul li{
        background: #1f2937;
        color: #a1a1aa;
        border-color: #374151;
    }

    :root[data-darkmode="true"] #tab-header-<%=self.config%>-<%=self.sectiontype%> ul li.cbi-tab{
        background: #2563eb;
        color: #fff;
    }

    :root[data-darkmode="true"] #tab-header-<%=self.config%>-<%=self.sectiontype%> ul li.cbi-tab a{
        color: #fff !important;
    }

    :root[data-darkmode="true"] #tab-header-<%=self.config%>-<%=self.sectiontype%> ul li.cbi-tab-disabled{
        color: #1f2937;
        background: #1f2937;
        opacity: 0.7;
    }

    :root[data-darkmode="true"] #tab-header-<%=self.config%>-<%=self.sectiontype%> ul li.cbi-tab-disabled a{
        color: #fff !important;
    }

    :root[data-darkmode="true"] #tab-header-<%=self.config%>-<%=self.sectiontype%> ul li:not(.cbi-tab):hover,
    :root[data-darkmode="true"] #tab-header-<%=self.config%>-<%=self.sectiontype%> ul li:not(.cbi-tab):focus{
        color: #3b82f6;
        border-color: #3b82f6;
        background: #22304a;
    }

    :root[data-darkmode="true"] #tab-header-<%=self.config%>-<%=self.sectiontype%> ul li:not(.cbi-tab):hover a,
    :root[data-darkmode="true"] #tab-header-<%=self.config%>-<%=self.sectiontype%> ul li:not(.cbi-tab):focus a{
        color: #60a5fa !important;
    }
</style>

<!-- tblsection -->
<fieldset class="cbi-section" id="cbi-<%=self.config%>-<%=self.sectiontype%>">
    <% if self.title and #self.title > 0 then -%>
        <legend><%=self.title%></legend>
    <%- end %>
    <%- if self.sortable then -%>
        <input type="hidden" id="cbi.sts.<%=self.config%>.<%=self.sectiontype%>" name="cbi.sts.<%=self.config%>.<%=self.sectiontype%>" value="" />
    <%- end -%>
    <div class="cbi-section-descr"><%=self.description%></div>
    <%- local count = 0 -%>
    <div id="tab-header-<%=self.config%>-<%=self.sectiontype%>" class="cbi-tabmenu">
        <ul class="cbi-tabmenu">
            <%- for i, tab in ipairs(e) do -%>
                <%- if i == 1 then -%>
                    <li name="tab-header-<%=self.config%>-<%=self.sectiontype%>" class="cbi-tab" data-group="<%=tab.group%>"><a><%=tab.title%></a></li>
                <%- else -%>
                    <li name="tab-header-<%=self.config%>-<%=self.sectiontype%>" class="cbi-tab-disabled" data-group="<%=tab.group%>"><a><%=tab.title%></a></li>
                <%- end -%>
            <%- end -%>
        </ul>
    </div>
    <div id="tab-content">
        <%- for t,o in ipairs(e)do
            if o.group == "nameserver" then
            -%>
            <div class="dom-<%=self.config%>-<%=self.sectiontype%>" style="display: block;" data-group="<%=o.group%>">
            <%- else -%>
            <div class="dom-<%=self.config%>-<%=self.sectiontype%>" data-group="<%=o.group%>">
            <%- end -%>
                <table class="cbi-section-table">
                    <tr class="cbi-section-table-titles">
                    <%- if not self.anonymous then -%>
                        <%- if self.sectionhead then -%>
                            <th class="cbi-section-table-cell"><%=self.sectionhead%></th>
                        <%- else -%>
                            <th>&#160;</th>
                        <%- end -%>
                    <%- end -%>
                    <%- for i, k in pairs(self.children) do if not k.optional then -%>
                        <%- if i == 1 then -%>
                            <th class="cbi-section-table-cell"><%:Serial Number%></th>
                        <%- end -%>
                        <th class="cbi-section-table-cell"<%=width(k)%>>
                        <%- if k.titleref then -%><a title="<%=self.titledesc or translate('Go to relevant configuration page')%>" class="cbi-title-ref" href="<%=k.titleref%>"><%- end -%>
                            <%-=k.title-%>
                        <%- if k.titleref then -%></a><%- end -%>
                        </th>
                    <%- count = count + 1; end; end; if self.sortable then -%>
                        <th class="cbi-section-table-cell"><%:Sort%></th>
                    <%- end; if self.extedit or self.addremove then -%>
                        <th class="cbi-section-table-cell"><%:Edit%></th>
                    <%- count = count + 1; end -%>
                    </tr>
                    <tr class="cbi-section-table-descr">
                    <%- if not self.anonymous then -%>
                        <%- if self.sectiondesc then -%>
                            <th class="cbi-section-table-cell"><%=self.sectiondesc%></th>
                        <%- else -%>
                            <th></th>
                        <%- end -%>
                    <%- end; if self.extedit or self.addremove then -%>
                        <th></th>
                    <%- end -%>
                    <%- for i, k in pairs(self.children) do if not k.optional then -%>
                        <th class="cbi-section-table-cell"<%=width(k)%>><%=k.description%></th>
                    <%- end; end; if self.sortable then -%>
                        <th class="cbi-section-table-cell"></th>
                    <%- end; if self.extedit or self.addremove then -%>
                        <th class="cbi-section-table-cell"></th>
                    <%- end -%>
                    </tr>
                    <%- local isempty = true
                        local num = 1
                    for i, k in ipairs(self:cfgsections()) do
                        section = k
                        local section_group = fs.uci_get_config(section, "group")
                        if section_group == o.group then
                            isempty = false
                            scope = { valueheader = "cbi/cell_valueheader", valuefooter = "cbi/cell_valuefooter" }
                    -%>
                            <tr class="cbi-section-table-row<% if self.extedit or self.rowcolors then %> cbi-rowstyle-<%=rowstyle()%><% end %>" id="cbi-<%=self.config%>-<%=section%>">
                            <% if not self.anonymous then -%>
                                <th><h3><%=(type(self.sectiontitle) == "function") and self:sectiontitle(section) or k%></h3></th>
                            <%- end %>
                            <td class="cbi-section-table-cell">
                                <p><%=num%></p>
                                <% num = num + 1 -%>
                            </td>
                            <%-
                                for k, node in ipairs(self.children) do
                                    if not node.optional then
                                        node:render(section, scope or {})
                                    end
                                end
                            -%>
                            <%- if self.sortable then -%>
                                <td class="cbi-section-table-cell">
                                    <input class="cbi-button cbi-button-up" type="button" value="<%:∧%>"  onclick="return cbi_row_swap(this, true, 'cbi.sts.<%=self.config%>.<%=self.sectiontype%>')" alt="<%:Move up%>" title="<%:Move up%>" />
                                    <input class="cbi-button cbi-button-down" type="button" value="<%:∨%>"  onclick="return cbi_row_swap(this, false, 'cbi.sts.<%=self.config%>.<%=self.sectiontype%>')" alt="<%:Move down%>" title="<%:Move down%>" />
                                </td>
                            <%- end -%>
            
                            <%- if self.extedit or self.addremove then -%>
                                <td class="cbi-section-table-cell">
                                    <%- if self.extedit then -%>
                                        <input class="btn cbi-button cbi-button-edit" type="button" value="<%:Edit%>"
                                        <%- if type(self.extedit) == "string" then
                                        %> onclick="location.href='<%=self.extedit:format(section)%>';return switch_to_tab<%=sectiontype%>()"
                                        <%- elseif type(self.extedit) == "function" then
                                        %> onclick="location.href='<%=self:extedit(section)%>';return switch_to_tab<%=sectiontype%>()"
                                        <%- end
                                        %> alt="<%:Edit%>" title="<%:Edit%>" />
                                    <%- end; if self.addremove then %>
                                        <input class="btn cbi-button cbi-button-remove" type="submit" value="<%:Delete%>"  onclick="this.form.cbi_state='del-section';return switch_to_tab<%=sectiontype%>()" name="cbi.rts.<%=self.config%>.<%=k%>" alt="<%:Delete%>" title="<%:Delete%>" />
                                    <%- end -%>
                                </td>
                            <%- end -%>
                            </tr>
                    <%- end -%>
                    <%- end -%>
    
                    <%- if isempty then -%>
                    <tr class="cbi-section-table-row">
                        <td colspan="<%=count%>"><em><br /><%:This section contains no values yet%></em></td>
                    </tr>
                    <%- end -%>
                </table>
        
                <% if self.error then %>
                    <div class="cbi-section-error">
                        <ul><% for _, c in pairs(self.error) do for _, e in ipairs(c) do -%>
                            <li><%=pcdata(e):gsub("\n","<br />")%></li>
                        <%- end end %></ul>
                    </div>
                <% end %>
        
                <%- if self.addremove then -%>
                    <% if self.template_addremove then include(self.template_addremove) else -%>
                    <div class="cbi-section-create cbi-tblsection-create">
                        <% if self.anonymous then %>
                            <input class="btn cbi-button cbi-button-add" type="submit" onclick="return switch_to_tab<%=sectiontype%>('create', '<%=o.group%>')" value="<%:Add%>" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" title="<%:Add%>" />
                        <% else %>
                            <% if self.invalid_cts then -%><div class="cbi-section-error"><% end %>
                            <input type="text" class="cbi-section-create-name" id="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=o.group%>" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=o.group%>" data-type="uciname" data-optional="true" />
                            <input type="hidden" name="cbi.opt.<%=self.config%>.<%=self.sectiontype%>.group" value="<%=o.group%>" />
                            <input class="btn cbi-button cbi-button-add" type="submit" onclick="this.form.cbi_state='add-section'; return true" value="<%:Add%>" title="<%:Add%>" />
                            <% if self.invalid_cts then -%>
                                <br /><%:Invalid%></div>
                            <%- end %>
                        <% end %>
                    </div>
                    <%- end %>
                <%- end -%>
            </div>
        <%- end -%>
    </div>
</fieldset>
<!-- /tblsection -->

<script type="text/javascript">//<![CDATA[
    window.addEventListener('load', onload<%=sectiontype%>, false);

    var titles<%=sectiontype%> = document.getElementsByName('tab-header-<%=self.config%>-<%=self.sectiontype%>');
    var divs<%=sectiontype%> = document.getElementsByClassName('dom-<%=self.config%>-<%=self.sectiontype%>');

    function isDarkBackground(element) {
        var cachedTheme = localStorage.getItem('oc-theme');
        if (cachedTheme === 'dark') {
            return true;
        } else if (cachedTheme === 'light') {
            return false;
        }

		if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
			return true;
		}

		var style = window.getComputedStyle(element);
		var bgColor = style.backgroundColor;
		let r, g, b;
		if (/rgb\(/.test(bgColor)) {
			var rgb = bgColor.match(/\d+/g);
			r = parseInt(rgb);
			g = parseInt(rgb);
			b = parseInt(rgb);
		} else if (/#/.test(bgColor)) {
			if (bgColor.length === 4) {
			r = parseInt(bgColor + bgColor, 16);
			g = parseInt(bgColor + bgColor, 16);
			b = parseInt(bgColor + bgColor, 16);
			} else {
			r = parseInt(bgColor.slice(1, 3), 16);
			g = parseInt(bgColor.slice(3, 5), 16);
			b = parseInt(bgColor.slice(5, 7), 16);
			}
		} else {
			return false;
		}
		var luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
		return luminance < 128;
	};
    
    function switch_to_tab<%=sectiontype%>(type){
        if(titles<%=sectiontype%>.length != divs<%=sectiontype%>.length) return;

        if ( type == 'create' ) {
            localStorage.setItem("titles<%=sectiontype%>", 0);
        } else {
            for(var j=0; j < titles<%=sectiontype%>.length; j++){
                if(titles<%=sectiontype%>[j].className === 'cbi-tab'){
                    localStorage.setItem("titles<%=sectiontype%>", j);
                    break;
                }
            }
        }

        localStorage.setItem("id<%=sectiontype%>",'cbi-<%=self.config%>-<%=self.sectiontype%>');
        return true;
    };

    function onload<%=sectiontype%>() {
        if (isDarkBackground(document.body)) {
            document.documentElement.setAttribute('data-darkmode', 'true');
        };
        
        if(titles<%=sectiontype%>.length != divs<%=sectiontype%>.length) return;

        if (localStorage.getItem("id<%=sectiontype%>")) {
            if (document.getElementById(localStorage.getItem("id<%=sectiontype%>"))) {
                document.getElementById(localStorage.getItem("id<%=sectiontype%>")).scrollIntoView();
            };
            localStorage.removeItem("id<%=sectiontype%>");
        };

        if (localStorage.getItem("titles<%=sectiontype%>")) {
            if (titles<%=sectiontype%>[localStorage.getItem("titles<%=sectiontype%>")]) {
                for(var j=0; j < titles<%=sectiontype%>.length; j++){
                    titles<%=sectiontype%>[j].className = 'cbi-tab-disabled';
                    divs<%=sectiontype%>[j].style.display = 'none';
                };
                titles<%=sectiontype%>[localStorage.getItem("titles<%=sectiontype%>")].className = 'cbi-tab';
                divs<%=sectiontype%>[localStorage.getItem("titles<%=sectiontype%>")].style.display = 'block';
            };
            localStorage.removeItem("titles<%=sectiontype%>");
        };

        for(var i=0; i < titles<%=sectiontype%>.length; i++){
            var li<%=sectiontype%> = titles<%=sectiontype%>[i];
            li<%=sectiontype%>.id = i;

            var a<%=sectiontype%> = li<%=sectiontype%>.querySelector('a');
            if (a<%=sectiontype%>) {
                if (a<%=sectiontype%>.scrollWidth > a<%=sectiontype%>.clientWidth) {
                    a<%=sectiontype%>.style.justifyContent = 'flex-start';
                    a<%=sectiontype%>.style.textAlign = 'left';
                } else {
                    a<%=sectiontype%>.style.justifyContent = 'center';
                    a<%=sectiontype%>.style.textAlign = 'center';
                }
            }
            
            li<%=sectiontype%>.onclick = function(){
                for(var j=0; j < titles<%=sectiontype%>.length; j++){
                    titles<%=sectiontype%>[j].className = 'cbi-tab-disabled';
                    divs<%=sectiontype%>[j].style.display = 'none';
                };
                this.className = 'cbi-tab';
                divs<%=sectiontype%>[this.id].style.display = 'block';
                localStorage.setItem("titles<%=sectiontype%>",this.id);
            };

            li<%=sectiontype%>.onTouchStart = function(){
                for(var j=0; j < titles<%=sectiontype%>.length; j++){
                    titles<%=sectiontype%>[j].className = 'cbi-tab-disabled';
                    divs<%=sectiontype%>[j].style.display = 'none';
                };
                this.className = 'cbi-tab';
                divs<%=sectiontype%>[this.id].style.display = 'block';
                localStorage.setItem("titles<%=sectiontype%>",this.id);
            };
        };
    };
//]]>
</script>